/*
 * icenter page
**/
<template>
<div>
<div class="quick-footernav"><span class="ui-btn" @click="goback">&nbsp;&nbsp;返回&nbsp;&nbsp;</span></div>
<div class="mod-page-tit-re">
  积分记录
</div>
<div class="weui-cells" v-load-more="loaderMore">
  <div class="weui-cell" v-for="item in creditRecordList">
    <div class="weui-cell__hd word-break ellipsis" style="width: 100%;">
      <span style="font-size:14px;">{{item.desc}}</span>
      <p style="font-size: 12px;">{{item.create_time}}
      	<span style="font-size: 13px;color: #ffa200;float:right;">{{item.point >= 0 ? '+' + item.point : item.point}}积分</span>
      </p>
    </div>
  </div>
  <div class="weui-loadmore" v-if="showLoading">
    <i class="weui-loading"></i>
    <span class="weui-loadmore__tips">正在加载</span>
  </div>
  <div class="weui-loadmore weui-loadmore_line" v-if="touchend">
      <span class="weui-loadmore__tips">没有更多</span>
  </div>
</div>
<div class="mod-footer-place"></div>
</div>
</template>
<script>
import vTab from 'components/common/tab'
import {loadMore} from 'src/config/mixin'
import {getUserCreditRecord, creditRecordChkSubscribe} from 'src/service/getData'
import {mapState, mapMutations} from 'vuex'
export default {
  data () {
    return {
      creditRecordList: [],
      offset: 1, // 批次加载数据 每次+1
      pageSize: 16, // 每页显示数据条数
      preventRepeatReuqest: false, // 到达底部加载数据，防止重复加载
      showLoading: true, // 显示加载动画
      touchend: false // 没有更多数据
    }
  },
  mixins: [loadMore],
  components: {
    'v-tab': vTab
  },
  computed: {
    ...mapState([
      'I9RIA'
    ])
  },
  mounted () {
    if (this.I9RIA && this.I9RIA.wxJsApiConf) {
      this.initData()
    }
  },
  methods: {
    ...mapMutations([
      'RECORD_INTEGRAL' // 用户积分记录
    ]),
    async initData () {
      let res = await getUserCreditRecord(this.offset, this.pageSize)
      console.log(res)
      this.showLoading = false
      this.touchend = true
      this.preventRepeatReuqest = false
      if (res.code !== 0) return
      if (res.data.list.length < this.pageSize) {
        this.touchend = true
      } else {
        this.touchend = false
      }
      this.creditRecordList = res.data.list
      this.getRecordState() // 积分记录
    },
    async getRecordState () { // 积分记录
      let res = await creditRecordChkSubscribe()
      if (res.code !== 0) {
        return
      }
      this.RECORD_INTEGRAL(res.data.is_update)
    },
    async loaderMore () {
      if (this.touchend) {
        return
      }
      // 防止重复请求
      if (this.preventRepeatReuqest) {
        return
      }
      this.showLoading = true
      this.preventRepeatReuqest = true

      // 数据的定位+1
      this.offset++
      let res = await getUserCreditRecord(this.offset, this.pageSize)
      if (res.code !== 0) {
        this.showLoading = false
        this.touchend = true
        this.preventRepeatReuqest = false
        return
      }
      res.data.list = res.data.list || []
      this.showLoading = false
      this.creditRecordList = [...this.creditRecordList, ...res.data.list]
      // 当获取数据小于20，说明没有更多数据，不需要再次请求数据
      if (res.data.list.length < this.pageSize) {
        this.touchend = true
        return
      }
      this.preventRepeatReuqest = false
    },
    goback () {
      this.$router.go(-1)
    }
  },
  watch: {
    I9RIA (res) {
      let val = res || {}
      if (val && val.wxJsApiConf) {
        this.initData()
      }
      if (val.code === 9999) {
        this.$router.push('/404')
      }
    }
  }
}
</script>
<style>

</style>
